<script setup>

</script>

<!--  首页： 用来操作用户管理信息的  -->
<template>
  <el-table :data="userArr">
    <el-table-column label="编号" type="index"></el-table-column>
    <el-table-column label="用户名" prop="username"></el-table-column>
    <el-table-column label="昵称" prop="nickname"></el-table-column>
    <el-table-column label="头像">
      <!--  头像属于自定义组件(不需要写prop=)(只要不是文本数据都属于自定义组件)，所以要使用template并定义slot-scope来获取数据  -->
      <template slot-scope="scope">
        <!--  el-avatar是头像组件  scope.row用于获取当前行在数组中对应的一个对象-->
        <el-avatar :src="scope.row.imgUrl"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="管理员">
      <!--  自定义组件： vue中只要不是文本数据都属于自定义组件 (这个类似于开关按钮组件) -->
      <template>

      </template>
    </el-table-column>
    <el-table-column label="创建时间" prop="createTime"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
</style>

<script>
export default {
  name: "AdminIndexView",
  data(){
    return {
      userArr: [
        {
          id: 12,
          nickname: "汤姆",
          username: "tom",
          isAdmin: true,
          imgUrl: "/imgs/head.jpg",
          createTime: "2023/03/31 00:43:52"
        },
        {
          id: 13,
          nickname: "刘德华",
          username: "ldh",
          isAdmin: false,
          imgUrl: "/imgs/a.jpg",
          createTime: "2023/03/25 15:03:08"
        },
        {
          id: 14,
          nickname: "杰瑞",
          username: "jerry",
          isAdmin: false,
          imgUrl: "/imgs/b.jpg",
          createTime: "2023/05/11 20:40:08"
        },
        {
          id: 15,
          nickname: "李政道",
          username: "lzd",
          isAdmin: false,
          imgUrl: "/imgs/head.jpg",
          createTime: "2024/02/25 15:03:08"
        }
      ]
    }
  },
  methods : {
    del(id){

    }

  }
}
</script>